import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'

import './index.less'

export default class SearchBar extends Taro.Component {

  constructor () {
    super(...arguments)

    this.state = {
      value: ''
    }
  }

  navigateTo = url => {
    Taro.navigateTo({url})
  }

  onChange = value => {
    this.setState({
      value,
    })
  }

  onActionClick = e => {
    e.stopPropagation();
    const {value} = this.state;
    this.navigateTo(`/pages/project_list/index?name=${value}`)
  }

  render() {
    return (
      <View className='container'>
        <AtSearchBar
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          onActionClick={this.onActionClick.bind(this)}
        />
        <View className='hot-wrapper'>
          <Text className='item'>企业</Text>
          <Text className='item'>土地</Text>
        </View>
      </View>
    )
  }
}
